<template>
  <div class="box">
    <el-row>
      姓名：{{ info.name }}
      <el-input v-model="info.name" placeholder="请输入姓名"></el-input>
      年龄：{{ info.age }}
      <el-input v-model="info.age" placeholder="请输入年龄"></el-input>
      性别：{{ info.sex }}
      <el-select v-model="info.sex" placeholder="请选择">
        <el-option v-for="item in options" :key="item" :value="item"></el-option>
      </el-select>
      <div clear:both></div>
      <el-button @click="create">创建</el-button>
      <template>
        <el-table :data="tabledata" align="left">
          <!-- :data="tabledata" 意思是绑定表格的数据 -->
          <el-table-column prop="name" label="姓名"></el-table-column>
          <!-- 在表格绑定数据情况下prop用于数据传递，tabeldata里的name -->
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="a">
              <el-button size="mini" type="danger" @click="del(a.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-row>
  </div>
</template>

<script>
import Storage from "../store/store";
export default {
  name: "NewContant",
  data() {
    return {
      info: {
        name: "",
        age: null,
        sex: ""
      },
      options: ["女", "男", "保密"],
      tabledata: Storage.fetch()
    };
  },
  methods: {
    create() {
      this.tabledata.push(this.info);
      this.info = { name: "", age: null, sex: "" };
    },
    del(index) {
      this.tabledata.splice(index, 1);
      // 删除点击的对象，index是lot-scope='a'，a.$index传过来的
    }
  },
  watch: {
    tabledata: {
      handler(items) {
        Storage.save(items);
      },
      deep: true
    }
  }
};
</script>

<style  scoped>
.box {
  width: 900px;
  height: 900px;
  margin: 0 auto;
}
.el-select {
  width: 250px;
}
</style>


